<template>
  <div class="app-container">
    <el-row :gutter="20" class="header">
      <el-button type="success" :icon="DocumentAdd" @click="orderFun" v-if="hasAuth('system:user:add')">{{ queryForm.order
        == "desc" ? '升序' : '降序'
      }}排序 </el-button>
    </el-row>
    <el-table :data="tableData" stripe border h style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column prop="nickname" label="党员姓名" align="center" />
      <el-table-column prop="domitoryGrade" label="宿舍星级" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.domitoryGrade == 3" type="success">三星级</el-tag>
          <el-tag v-if="scope.row.domitoryGrade == 2" type="warning">二星级</el-tag>
          <el-tag v-if="scope.row.domitoryGrade == 1" type="danger">一星级</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="domitoryGradeScore" width="80" label="寝室得分" align="center" />

      <el-table-column prop="prizeNum" label="奖项数量" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.prizeNum == 3" type="success">{{ scope.row.prizeNum }}</el-tag>
          <el-tag v-if="scope.row.prizeNum == 2" type="warning">{{ scope.row.prizeNum }}</el-tag>
          <el-tag v-if="scope.row.prizeNum == 1" type="danger">{{ scope.row.prizeNum }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="prizeNumScore" width="80" label="奖项得分" align="center" />

      <el-table-column prop="readNum" label="阅读书籍" width="90" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.readNum >= 10" type="success">{{ scope.row.readNum }} 本书</el-tag>
          <el-tag v-if="scope.row.readNum >= 5 && scope.row.readNum < 10" type="info">{{ scope.row.readNum }} 本书</el-tag>
          <el-tag v-if="scope.row.readNum < 5" type="danger">{{ scope.row.readNum }} 本书</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="readNumScore" width="80" label="阅读得分" align="center" />

      <el-table-column prop="serviceNum" label="服务时长" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.serviceNum >= 10" type="success">{{ scope.row.serviceNum }} 小时</el-tag>
          <el-tag v-if="scope.row.serviceNum >= 5 && scope.row.serviceNum < 10">{{ scope.row.serviceNum }} 小时</el-tag>
          <el-tag v-if="scope.row.serviceNum < 5" type="danger">{{ scope.row.serviceNum }} 小时</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="serviceNumScore" label="服务时长得分" align="center" />

      <el-table-column prop="gradesTotal" label="总分" align="center" />

    </el-table>

  </div>
</template>

<script setup>
import { Search, Delete, DocumentAdd, Edit, Tools, RefreshRight } from "@element-plus/icons-vue";
import { ref } from "vue";
import requestUtil, { getServerUrl } from "@/utils/request";

const queryForm = ref({
  order: "desc"
});

const total = ref(0);

const tableData = ref([]);

const id = ref(-1);

const initUserList = async () => {
  const res = await requestUtil.get("gradeScore/orderByGrades", queryForm.value);

  tableData.value = res.data.gradesList;

};

const orderFun = async () => {
  if (queryForm.value.order == "desc") {
    queryForm.value.order = "asc"
  } else {
    queryForm.value.order = "desc"
  }

  initUserList();
}


initUserList();

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initUserList();
};

const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initUserList();
};


const resetSearch = () => {

  initUserList();
};

</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;

  .el-col {
    display: flex;
  }

  .el-form-item {
    margin-right: 10px;
  }
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
